<template>
	<view class="binding">
		<view class="top">
			<view class="top-item">
				<view class="item-l">
					<input type="text" v-model="recommenderAccountId" placeholder="邀请人ID"/>
				</view>
				<view class="item-r">
					<button>使用官方推荐ID</button>
				</view>
			</view>
		</view>
		<view class="tip">
			绑定ID号之后，即为邀请人的人脉
		</view>
		<button class="bottom" :class="{'active': recommenderAccountId !=''}" @click="toLogin">关联并登录</button>
	</view>
</template>

<script>
	import Api from '../../../util/api.js'
	export default {
		data() {
			return {
				recommenderAccountId:''
			};
		},
		methods: {
			toLogin(){
				if(this.recommenderAccountId  == ''){
					uni.showToast({
							title: '请输入推荐人ID',
							icon: 'none',
							duration: 2000
					});
					return false;
				}
				Api.fetchPost('/account/bindRecommender',{recommenderAccountId: this.recommenderAccountId}).then(res=>{
					if(res.errorNo == 0){
						uni.reLaunch({url:'/pages/index/index/index'});
					}
				}).catch(err=>{})
			},
		}
	}
</script>

<style>
.binding {
	width: 100%;
	min-height: 100%;
	background-color: #f3f3f3;
	position: absolute;
	font-size: 24upx;
}
.top {
	background-color: #fff;
	padding: 30upx;
}
.top-item {
	height: 100upx;
	line-height: 100upx;
	display: flex;
	position: relative;
}
.top-item:first-child {
	border-bottom: 1px solid #CCCCCC;
}
.tip {
	padding: 20upx 30upx;
}
.item-l {
	flex: 1;
}
.item-l input {
	width: 100%;
	height: 100upx;
	line-height: 100upx;
	font-size: 34upx;
}
.item-r {
	width:220upx ;
}
.item-r button {
	width: 220upx;
	font-size: 26upx;
	background-color: #555555;
	height: 56upx;
	line-height: 56upx;
	color: #fff;
	margin-top: 22upx;
	padding: 0;
}
.bottom {
	width: 100%;
	height: 120upx;
	line-height: 120upx;
	background-color: #999999;
	border-radius: 0;
	position: absolute;
	bottom: 0;
	opacity: .5;
	color: #fff;
	font-size: 30upx;
}
.bottom.active {
	background-color: #F52A4C;
	opacity: 1;
}
</style>
